<template>
  <div class="main-box">
    <TreeFilter @change="changeTreeFilter" :data="treeData.data" />
    <div class="table-box" @dblclick="handleDbClick">
      <ProTable
        ref="dataGridRef"
        :columns="dataGrid.columns"
        :request-auto="false"
        :init-param="dataGrid.initParam"
        :request-api="dictListByCatalogCode"
        :pagination="false"
        :data-callback="dataGridCallBack"
        :tool-button="['setting']"
      >
        <template #tableHeader>
          <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
        </template>

        <template #operation="{ row }">
          <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
        </template>
      </ProTable>

      <!-- 新增数据字典 -->
      <DialogForm
        :options="addForm.options"
        :title="addForm.title"
        :min-width="addForm.minWidth"
        :form-attrs="addForm.formAttrs"
        v-model:visible="addForm.visible"
        @get-model="form => (addForm.form = form)"
        @submit-form="saveAddForm"
      ></DialogForm>
    </div>
  </div>
</template>

<script setup lang="ts" name="Dictionary">
import { ProTableInstance } from '@/components/ProTable/interface';
import { useDataGrid } from './mixins/dataGrid';
import { dictListByCatalogCode } from '$api/basic/dictionary';

const dataGridRef = ref<ProTableInstance>(null);
const changeTreeFilter = async (row?): Promise<void> => {
  clearTreeData();

  if (row?.level !== 2) return;

  Object.assign(dataGrid.initParam, {
    catalogCode: row.dicCode
  });
  console.log(dataGrid.initParam, 'dataGrid.initParam');

  // const data: any = await dictListByCatalogCode({ catalogCode: row.dicCode });
  // dataGrid.data = data[row.dicCode] || [];

  selectTreeData(row);
};

// 刷新字典目录
const handleDbClick = async () => {
  await searchTreeData();
  elMessage('刷新目录成功');
};

const { dataGrid, saveAddForm, addForm, dataGridCallBack, treeData, searchTreeData, clearTreeData, selectTreeData } =
  useDataGrid(dataGridRef);
</script>
